<template>
	<div :class="className" :style="{height:height,width:width}" />
</template>

<script>
	import echarts from 'echarts'
	require('echarts/theme/macarons') // echarts theme
	import resize from './mixins/resize'
	import {
		selectBatStatus
	} from './req.js'
	export default {
		mixins: [resize],
		props: {
			className: {
				type: String,
				default: 'chart'
			},
			width: {
				type: String,
				default: '100%'
			},
			height: {
				type: String,
				default: '300px'
			}
		},
		data() {
			return {
				chart: null,
				showdata: {
					"unConnectedNum": 4,
					"chargingErrorNum": 0,
					"disChargingNormalNum": 0,
					"code": 1,
					"totalNum": 5,
					"chargingNormalNum": 0,
					"disChargingErrorNum": 1,
					"offLineNormalNum": 0,
					"offLineErrorNum": 0
				},
				colorList: ['#000000', '#0fcc05', '#0090ff', '#8e9ca3', '#e2cf3b', '#6173d6', '#914ce5', '#42b1cc',
					'#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc',
					'#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc',
					'#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc',
					'#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc',
					'#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc',
					'#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc',
					'#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc',
					'#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc',
					'#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc',
					'#ff55ac', '#0090ff', '#06d3c4', '#ffbc32', '#2ccc44', '#ff3976', '#6173d6', '#914ce5', '#42b1cc',
					'#ff55ac'
				]

			}
		},
		mounted() {
			this.$nextTick(() => {
				this.seleb();
				// this.initChart()
			})
		},
		beforeDestroy() {
			if (!this.chart) {
				return
			}
			this.chart.dispose()
			this.chart = null
		},
		methods: {
			async seleb() {
				let parm = {
					batModelId: '',
					batNo: '',
					batTypeId: '',
					operationDepartment: ''
				}
				let result = await selectBatStatus(parm);
				//console.log("结果",result);
				this.showdata = result;
				this.initChart();
			},
			initChart() {
				let that = this;
				let data1 = Number(that.showdata.offLineNormalNum+that.showdata.offLineErrorNum);
				data1 = data1==0?null:data1;
				this.chart = echarts.init(this.$el, 'macarons')
				let option = {
					backgroundColor: '#fff',
					tooltip: {
						formatter: function(param) {
							if (param.data.type == null) {

								return param.data.name + ":" + param.value + '个';
							} else {

								return param.data.type + ":" + param.value + '个';
							}
						}
					},

					series: [{
							name: '整体分类',
							type: 'pie',
							radius: ['1%', '40%'],
							label: {
								position: 'inner',

							},
							itemStyle: {
								normal: {
									borderColor: '#fff',
									borderWidth: 2,
									color: function(params) {
										return that.colorList[params.dataIndex]
									}
								}
							},

							selectedMode: 'single',
							data: [{
									value: that.showdata.unConnectedNum==0?null:that.showdata.unConnectedNum,
									name: '未连接',

								},
								{
									value: Number(that.showdata.chargingErrorNum+that.showdata.chargingNormalNum)==0?null:Number(that.showdata.chargingErrorNum+that.showdata.chargingNormalNum),
									name: '充电',

								},
								{
									value: Number(that.showdata.disChargingNormalNum+that.showdata.disChargingErrorNum)==0?null:Number(that.showdata.disChargingNormalNum+that.showdata.disChargingErrorNum),
									name: '放电',
								
								},
								{
									value: data1,
									name: '离线',
								
								}
							]
						},
						{
							name: '电池状态',
							type: 'pie',
							radius: ['50%', '65%'],

							itemStyle: {
								normal: {
									color: function(params) {
										return that.colorList[params.dataIndex]
									}
								}
							},
							label: {
								normal: {
									formatter: function(params) {

										if (params.value != 0)
											return params.data.type + ":" + params.value + '个';
										else
											return '';
									},
									show: true,

								},

							},

							data: [{
									value: that.showdata.unConnectedNum==0?null:that.showdata.unConnectedNum,
									name: '未连接',
									type: "未连接",
									color:'red',

								},
								{
									value: that.showdata.disChargingErrorNum==0?null:that.showdata.disChargingErrorNum,
									name: '放电',
									type: '放电异常',
									label:{
										color:'#e2cf3b',
									},
									itemStyle:{
										color:'#e2cf3b',
									}

								},
								{
									value: that.showdata.disChargingNormalNum==0?null:that.showdata.disChargingNormalNum,
									name: '放电',
									type: '放电正常',

								},
								{
									value: that.showdata.chargingErrorNum==0?null:that.showdata.chargingErrorNum,
									name: '充电',
									type:'充电异常',
									label:{
										color:'#e2cf3b',
									},
									itemStyle:{
										color:'#e2cf3b',
									}

								},
								{
									value: that.showdata.chargingNormalNum==0?null:that.showdata.chargingNormalNum,
									name: '充电',
									type: '充电正常',
									

								},
								{
									value: that.showdata.offLineNormalNum==0?null:that.showdata.offLineNormalNum,
									name: '离线',
									type: '离线正常',

								},
								{
									value: that.showdata.offLineErrorNum==0?null:that.showdata.offLineErrorNum,
									name: '离线',
									type: '离线异常',
									label:{
										color:'#e2cf3b',
									},
									itemStyle:{
										color:'#e2cf3b',
									}

								}



							]
						}
					]
				}
				this.chart.setOption(option)
			}
		}
	}
</script>
